<template>
  <div>
    <!-- ===============分支机构======================== -->

    <!-- ---------------背景图片1----------------------- -->
    <div class="banner">
      <!-- <img src="../../src/assets/img_women/qiye/BJ_01.jpg" alt="" /> -->
    </div>
    <!-- -------------导航栏-------------------- -->
    <div class="nav-bj">
      <div class="nav">
        <ul>
          <li  @click="$router.push('/home/women')">企业介绍</li>
          <li  @click="$router.push('/home/fuwu')">服务理念</li>
          <li  @click="$router.push('/home/guoji')">国际战略</li>
          <li  class="active" @click="$router.push('/home/fenzhi')">分支机构</li>
          <li  @click="$router.push('/home/shipin')">食品安全</li>
        </ul>
      </div>
    </div>
    <!-- -------------版心-------------------- -->

    <div class="center">
      <!-- ----------面包屑导航--------- -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="bum">
        <el-breadcrumb-item>您现在所在的位置</el-breadcrumb-item>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>我们</el-breadcrumb-item>
        <el-breadcrumb-item>分支机构</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- ----------------大型现代化加工 ------------------ -->
      <div class="DuanLuo">
        <img class="bj2" src="../../assets/img_women/qiye/BJ_02.jpg" />
        <img class="c1" src="../../assets/img_women/FenZhi/jiaGong.jpg" />
      </div>

      <!-- ---------------------图片--------------------- -->

      <div class="tt">
        <div class="left">
          <img src="../../assets/img_women/FenZhi/sz_1.jpg" />
          <div class="text_tt">
            <h5>苏州加工中心</h5>
            <span>苏州工业园区唯亭镇唯文路</span>
          </div>
          <img src="../../assets/img_women/FenZhi/bjzx_2.jpg" />
          <div class="text">
            <h5>北京加工中心</h5>
            <span> 北京市通州区潞城镇武兴北路4号</span>
          </div>
          <img src="../../assets/img_women/FenZhi/sd_3.jpg" />
          <div class="text">
            <h5>山东加工中心</h5>
            <span> 菏泽市定陶区广州路南段西侧</span>
          </div>
          <img src="../../assets/img_women/FenZhi/sy_4.jpg" />
          <div class="text">
            <h5>沈阳加工中心</h5>
            <span> 沈阳市经济技术开发区洪湖一街26号</span>
          </div>
          <img src="../../assets/img_women/FenZhi/hz_5.jpg" />
          <div class="text">
            <h5>菏泽加工中心</h5>
            <span> 山东省菏泽市定陶区冉堌镇工业园</span>
          </div>
          <img src="../../assets/img_women/FenZhi/jx_6.jpg" />
          <div class="text">
            <h5>金乡加工中心</h5>
            <span> 山东金乡县经济开发区</span>
          </div>
          <img src="../../assets/img_women/FenZhi/zjg_7.jpg" />
          <div class="text">
            <h5>张家港加工中心</h5>
            <span> 江苏省张家港市金港镇长山工业集中区</span>
          </div>
          <img src="../../assets/img_women/FenZhi/xh_8.jpg" />
          <div class="text">
            <h5>香河加工中心</h5>
            <span>香河县景观大道北侧</span>
          </div>
        </div>
        <div class="right">
          <ul>
            <li class="active">苏州加工中心</li>
            <li>北京加工中心</li>
            <li>山东加工中心</li>
            <li>沈阳加工中心</li>
            <li>菏泽加工中心</li>
            <li>金乡加工中心</li>
            <li>张家港加工中心</li>
            <li>香河加工中心</li>
          </ul>
        </div>
      </div>

      <!-- ----------------分公司介绍 ------------------ -->
      <div class="DuanLuo">
        <img class="bj2" src="../../assets/img_women/qiye/BJ_02.jpg" />
        <img class="c2" src="../../assets/img_women/FenZhi/gsjs.jpg" />
      </div>

      <!-- -------------------分公司介绍卡片-------------------------------- -->
      <div class="card">
        <!-- 1 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>苏州稻香村食品有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>苏州工业园区唯亭镇唯文路19 号
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>215122
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0512-87182818
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>0512-87182818
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>

        <!-- 2 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>北京苏稻食品工业有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>地址：北京市通州区潞城镇武兴北路4号
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>101107
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>010-81539797
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>010-60527945
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 3 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>沈阳稻香村食品工业有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>沈阳市经济技术开发区洪湖一街26号
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>110000
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>024-31635503
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>024-31635503
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.sydxc1773.com
          </div>
        </el-card>
        <!-- 4 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>山东稻香村食品工业有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>山东省菏泽市定陶区广州路南端西侧
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>274112
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0530-2211773
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>0530-2211773
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 5 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>菏泽稻香村食品有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span
            >山东省菏泽市定陶区冉堌镇工业园（冉达路以东，向阳路北侧）
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>274100
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0530-2536866
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>暂无
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 6 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>稻香村食品集团（金乡）有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>山东省济宁市金乡县食品工业园区崇文大道西段12号
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>262700
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0537-28775199
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>0512-87182818
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 7 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>金乡稻香村食品有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>山东金乡县经济开发区(鱼山镇食品工业园区)
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>272200
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0537-2327966
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>0537-2327966
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 8 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>稻香五号码头（金乡）食品有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>山东省济宁市金乡县食品工业园区崇文大道西段12号
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>272200
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0537-8819288
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>0537-8819288
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 9 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>张家港福吉佳食品股份有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span>江苏省张家港市金港镇长山村1幢
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>215632
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0512-89581089
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>0512-89581081
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
        <!-- 10 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>成都稻香村风味食品有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span
            >四川省成都市中国（四川）自由贸易试验区成都高新区天府大道北段1700号4栋1单元8层818号
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>610000
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>028-86701327
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>暂无
          </div>
          <!-- <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn</div> -->
        </el-card>
        <!-- 11 -->
        <el-card class="box-card">
          <div slot="header" class="title">
            <span>山东稻香印务有限公司</span>
          </div>
          <div class="text item">
            <i class="el-icon-location-outline"></i>
            <span>地址：</span
            >山东省菏泽市定陶区广州路南段西侧（山东稻香村食品工业有限公司院内）
          </div>
          <div class="text item">
            <i class="el-icon-message"></i>
            <span>邮编：</span>274100
          </div>
          <div class="text item">
            <i class="el-icon-phone-outline"></i>
            <span>电话：</span>0530-2226399
          </div>
          <div class="text item">
            <i class="el-icon-lock"></i>
            <span>传真：</span>暂无
          </div>
          <div class="text item">
            <i class="el-icon-refresh"></i>
            <span>网址：</span>www.daoxiangcun.cn
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css_women/base.css";
import "@/assets/css_women/reset.css";
export default {
  data() {
    return {
      activeIndex: "1",
      num: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
// --------------背景 ----------------
.banner {
  width: 100%;
  height: 600px;
  background-image: url(../../assets/img_women/qiye/BJ_01.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
//---------------导航栏 ----------------
.nav-bj {
  background-color: #e6dfc9;
  .nav {
    width: 1200px;
    margin: 0 auto;
    > ul {
      display: flex;
      height: 52px;
      font-size: 20px;

      > li {
        height: 100%;
        width: 160px;
        line-height: 52px;
        &.active {
          background-color: #ceaf59;
          color: #fff;
        }

        &:hover {
          background-color: #ceaf59;
          color: #fff;
        }
        
      }
    }
  }
}

//---------------版心 ----------------
.center {
  width: 1200px;
  margin: 0 auto;
  > .bum {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
  }

  //--------------- DuanLuo(段落图文字) ----------------
  > .DuanLuo {
    position: relative;
    margin-top: 25px;
    margin-bottom: 35px;
    > .c1 {
      position: absolute;
      top: 60px;
      left: 35%;
    }
    > .c2 {
      position: absolute;
      top: 60px;
      left: 41%;
    }
    > .bj2 {
      width: 1500px;
      padding-right: 260px;
    }
  }

  /* ---------------------图片------------------------- */
  .tt {
    display: flex;
    .left {
      position: relative;
      width: 800px;
      height: 406px;
      overflow: hidden;
      > .text_tt {
        text-align: end;
        position: absolute;
        bottom: 30px;
        right: 40px;
        > h5 {
          font-weight: 300;
          font-size: 24px;
          color: #fff;
          padding-bottom: 5px;
        }
        > span {
          font-size: 14px;

          color: #fff;
        }
      }
    }
    .right {
      width: 377px;
      height: 406px;
      overflow: hidden;
      > ul {
        display: flex;
        flex-wrap: wrap;

        > li {
          border: 1px solid #ceaf59;
          width: 188px;
          height: 134px;
          line-height: 134px;
          font-size: 20px;
          font-weight: 600;
          color: #b78439;
          background-color: #fff;

          &.active {
            background-color: #ceaf59;
            color: #fff;
          }
          &:hover{
            background-color: #ceaf59;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>


<style>
/*  -------------------分公司介绍卡片--------------------------- */

.card {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
.box-card {
  width: 400px;
  height: 300px;
  text-align: start;
  border: 1px solid #ceaf59;
  color: #333333;
}
.title {
  font-size: 20px;
  font-weight: 300;
}
span {
  color: #b78439;
}
.text {
  font-size: 16px;
}
.item {
  margin-bottom: 18px;
}
i {
  padding-right: 5px;
  color: #b78439;
}
</style>